<template>
	<view>
		<view class="plate">
			<view style="position: relative" :class="['item',{active:index===0}]" @click.stop="handleChange(0)">
				{{plate[0]}}
			</view>
			<view style="position: relative" :class="['item',{active:index===1}]" @click.stop="handleChange(1)">
				{{plate[1]}}
			</view>
			<view class="point"></view>
			<view style="position: relative" :class="['item',{active:index===2}]" @click.stop="handleChange(2)">
				{{plate[2]}}
			</view>
			<view style="position: relative" :class="['item',{active:index===3}]" @click.stop="handleChange(3)">
				{{plate[3]}}
			</view>
			<view style="position: relative" :class="['item',{active:index===4}]" @click.stop="handleChange(4)">
				{{plate[4]}}
			</view>
			<view style="position: relative" :class="['item',{active:index===5}]" @click.stop="handleChange(5)">
				{{plate[5]}}
			</view>
			<view style="position: relative" :class="['item',{active:index===6}]" @click.stop="handleChange(6)">
				{{plate[6]}}
			</view>
			<view style="position: relative" :class="['item column',{active:index===7}]" @click.stop="handleChange(7)">
				<template v-if="newEnergy">
					<text>{{plate[7]}}</text>
				</template>
				<template v-else>
					<view class="c-pa" style="background-color: #eef3ff;width: 100%;height: 100%;">
						<image class="c-pa" style="width: 60rpx;height: 60rpx;right: 0rpx;bottom: -15rpx;"
							src="../../static/recycle.png" mode=""></image>
					</view>
				</template>
			</view>
		</view>

		<section class="panel" :class="{show:show}">
			<view class="header">
				<view class="p24" @click.stop="panelReset">重置</view>
				<!-- <img src="/static/down.png" style="width: 140rpx;" mode="widthFix" @click="panelHide" /> -->
				<view class="p24" @click.stop="panelHide">关闭</view>
			</view>
			<view class="panelList clearfix">
				<view class="item flex-justify-center flex-align-center" v-for="(item,index) of currentDatas"
					@click.stop="clickKeyBoard(item)" :key='index'>
					<text>{{item}}</text>
				</view>
			</view>
			<view class="backspace shadow" @click.stop="backspace">
				<text>删</text>
			</view>
		</section>
	</view>
</template>

<script>
	export default {
		name: "index",
		props: {
			characterDatas: {
				type: Array,
				default () {
					return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N',
						'P', 'Q',
						'R',
						'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '港', '澳', '学', '领', '挂'
					]
				}
			},
			areaDatas: {
				type: Array,
				default () {
					return ['京', '沪', '粤', '津', '冀', '晋', '蒙', '黑', '吉', '辽', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘',
						'桂',
						'琼', '渝', '川', '贵', '云', '藏',
						'陕', '甘', '青', '宁', '新', '临', '领', '警', '学', '港', '澳'
					]
				}
			},
			defaultPlate: {
				type: Array,
				default () {
					return Array.from({
						length: 8
					}, v => '')
				}
			},
			plateType: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				show: false,
				index: -1,
				newEnergy: false,
				plate: this.defaultPlate
			}
		},
		created() {},
		computed: {
			currentDatas() {
				return this.index === 0 ? this.areaDatas : this.characterDatas;
			}
		},
		watch: {
			defaultPlate(newV) {
				this.plate = newV
				console.log(newV, 'newVnewV')
			},


			plate(value) {
				this.$emit("listenPlateChange", value);
			},
			plateType: {
				handler(value) {
					if (value !== 3) {
						this.newEnergy = false;
						this.$set(this.plate, 7, '');
						if (this.index === 7) {
							this.index = 0
						}
					} else {
						this.newEnergy = true;
					}
				},
				deep: true
			}
		},
		methods: {
			panelShow() {
				this.show = true;
			},
			panelHide() {
				this.show = false;
			},
			handleChange(index) {
				if (index === 7) {
					if (this.plateType == 3) {
						this.newEnergy = true;
						this.panelShow();
						this.index = index;
					}
				} else {
					this.panelShow();
					this.index = index;
				}
			},
			clickKeyBoard(item) {
				if (this.index < 7 || this.newEnergy) {
					this.$set(this.plate, this.index, item);
				}

				if (this.index < 6 || (this.plateType === 3 && this.index < 7)) {
					this.index++;
				}
			},
			backspace() {
				if (this.index > 0) {
					if (this.index == 7) {
						this.newEnergy = false;
					}
					if (this.plateType === 3) {
						this.newEnergy = true;
					}
					this.$set(this.plate, this.index, '');
					this.index--;
				}
			},
			panelReset() {
				this.index = 0;
				this.plate = Array.from({
					length: 8
				}, v => '');
			},
		}
	}
</script>

<style scoped lang='scss'>
	.plate {
		display: flex;
		align-items: center;
		justify-content: space-between;

/* 		&>view:first-child {
			width: 104rpx;
			height: 104rpx;
		} */

		.item {
			border: 1px solid white;
			width: 68rpx;
			height: 104rpx;
			background-color: #f5f5f5;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			line-height: 104rpx;
			justify-content: center;
			color: #000;
			font-size: 36rpx;
			font-weight: 500;

			&.column {
				flex-direction: column;
			}

			&.active {
				border: 3rpx solid #3686FF;
			}
		}
	}

	.point {
		width: 12rpx;
		height: 24rpx;
		border-radius: 6rpx;
		background: #3686FF;
	}

	.panel {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		z-index: 999;
		margin-bottom: 10rpx;
		box-sizing: border-box;
		background-color: #cfd0d5;
		transition: all 0.3s ease;
		transform: translateY(100%);

		.p24 {
			padding: 24rpx;
		}

		&.show {
			transform: translateX(0);
		}

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			border-top: 1px solid #c9cacd;
			border-bottom: 1px solid #c9cacd;
		}

		.panelList {
			padding-top: 20rpx;
			padding-left: 16rpx;
			text-align: center;

			.item {
				float: left;
				width: 62rpx;
				height: 84rpx;
				background: #fff;
				border-radius: 10rpx;
				line-height: 84rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				box-shadow: 0 0 8px 1px #e5e5e5;
				position: relative;

			}
		}

		.backspace {
			position: absolute;
			bottom: 10rpx;
			right: 22rpx;
			width: 62rpx;
			height: 84rpx;
			background-color: #adb2bc;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.icon {
		width: 10rpx;
		height: 10rpx;
		position: absolute;
		bottom: 8rpx;
		right: 8rpx;
	}

	.clearfix::before,
	.clearfix::after {
		content: ' ';
		display: table;
		height: 0;
		line-height: 0;
		visibility: hidden;
		clear: both;
	}
</style>